<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id="mycanvas" width="600" height="600"></canvas>
</body>

<script>
    var myCanvas = document.getElementById("mycanvas");
    var context = myCanvas.getContext("2d");
    //平移,便于图形的绘制
    context.translate(300, 300);
    function downloadClock({clockColor}) {
        function clock() {
            context.clearRect(-200, -200, 400, 400);

            //表盘的绘制
            context.beginPath();
            context.arc(0, 0, 200, 0, 2 * Math.PI);
            context.strokeStyle = clockColor;
            context.lineWidth = 8;
            context.stroke();

            //刻度的绘制,关注当前坐标系的状态，在特定状态下进行绘制
            for (var i = 0; i < 60; i++) {
                context.beginPath();
                if (i % 5 == 0) {
                    context.moveTo(170, 0);
                    context.lineTo(190, 0);
                    context.strokeStyle = "red";
                    context.lineWidth = 6;
                } else {
                    context.moveTo(176, 0);
                    context.lineTo(190, 0);
                    context.strokeStyle = "black";
                    context.lineWidth = 4;
                }
                context.stroke();
                context.rotate(Math.PI / 30);
            }

            //绘制表盘的数字
            for (var i = 0; i < 12; i++) {
                var numDeg = (i + 1) * Math.PI / 6 - Math.PI / 2;
                context.textAlign = "center";
                context.textBaseline = "middle";
                var numX = 140 * Math.cos(numDeg);
                var numY = 140 * Math.sin(numDeg);
                context.fillText(i + 1, numX, numY);
            }

            //进行时针分针秒针的绘制
            var date1 = new Date();
            var hour = date1.getHours();
            var minute = date1.getMinutes();
            var second = date1.getSeconds();
            hour = hour > 12 ? (hour - 12) : hour;//判断》12点时解决方法
            //旋转角度
            var hourDeg = (hour + minute / 60) * Math.PI / 6;
            var minuteDeg = (minute + second / 60) * Math.PI / 30;
            var secondDeg = second * Math.PI / 30;
            //在当前坐标系中位置
            hourDeg = hourDeg - Math.PI / 2;
            minuteDeg = minuteDeg - Math.PI / 2;
            secondDeg = secondDeg - Math.PI / 2;
            //时针
            var hourStartX = -20 * Math.cos(hourDeg);
            var hourStartY = -20 * Math.sin(hourDeg);

            var hourEndX = 130 * Math.cos(hourDeg);
            var hourEndY = 130 * Math.sin(hourDeg);

            context.beginPath();
            context.moveTo(hourStartX, hourStartY);
            context.lineTo(hourEndX, hourEndY);
            context.strokeStyle = "purple";
            context.lineWidth = 6;
            context.stroke();

            //分针的绘制
            var minuteStartX = -20 * Math.cos(minuteDeg);
            var minuteStartY = -20 * Math.sin(minuteDeg);

            var minuteEndX = 134 * Math.cos(minuteDeg);
            var minuteEndY = 134 * Math.sin(minuteDeg);

            context.beginPath();
            context.moveTo(minuteStartX, minuteStartY);
            context.lineTo(minuteEndX, minuteEndY);
            context.strokeStyle = "pink";
            context.lineWidth = 6;
            context.stroke();

            //秒针的绘制
            var secondStartX = -20 * Math.cos(secondDeg);
            var secondStartY = -20 * Math.sin(secondDeg);

            var secondEndX = 138 * Math.cos(secondDeg);
            var secondEndY = 138 * Math.sin(secondDeg);

            context.beginPath();
            context.moveTo(secondStartX, secondStartY);
            context.lineTo(secondEndX, secondEndY);
            context.strokeStyle = "red";
            context.lineWidth = 4;
            context.stroke();
            //画圆
            context.beginPath();
            context.arc(110 * Math.cos(secondDeg), 110 * Math.sin(secondDeg), 6, 0, 2 * Math.PI);
            context.fillStyle = "red";
            context.fill();
            context.beginPath();
            context.arc(110 * Math.cos(secondDeg), 110 * Math.sin(secondDeg), 3, 0, 2 * Math.PI);
            context.fillStyle = "black";
            context.fill();
        }
        clock();
        setInterval(clock, 1000);
    }
    downloadClock({ clockColor: 'green' });
    
</script>

</html>